<script lang="ts" setup>
import previewImage from '@/components/common/PreviewImage'
const handlePreviewImage = () => {
  previewImage({
    urlList: [
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
    ],
    initialIndex: 1
  })
}
</script>

<template>
  <el-card class="m-base">
    <template #header>指令 v-previewImage 只支持图片数组</template>
    <el-button
      type="primary"
      v-previewImage="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
      >预览图片指令</el-button
    >
  </el-card>
  <el-card class="m-base">
    <template #header>API 支持 ElImageViewer 组件所有属性</template>
    <el-button type="primary" size="default" @click="handlePreviewImage">预览图片API</el-button>
  </el-card>
</template>
